<template>
    <Header title='JD商城' class="headerColor">
        <template #left>
            <van-icon name="arrow-left" @click="tobackFn"/>
        </template>
    </Header>
    <van-steps :active="active">
        <van-step>买家下单</van-step>
        <van-step>商家接单</van-step>
        <van-step>买家提货</van-step>
        <van-step>交易完成</van-step>
    </van-steps>

    <!-- 每一个步骤的内容 -->
    <div v-if="active == 0" class="step0 step-item ">
        <!--1. 表单填写手机号 -->
        <van-form class="login-form" @submit="checkPhoneHandler">
            <van-cell-group inset>
                <van-field v-model="phone" name="手机号" label="手机号" placeholder="手机号"
                    :rules="[{ required: true, message: '请填写手机号', pattern: /\d{11}/ }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit"
                    color="linear-gradient(to right, #ff6034, #ee0a24)">
                    验证
                </van-button>
            </div>
        </van-form>

    </div>

    <!-- 2.发送验证码 -->
    <div v-if="active == 1" class="step1 step-item ">
        <van-form class="login-form" @submit="checkCodeHandler">
            <van-cell-group inset>
                <van-field v-model="code" center clearable placeholder="请输入短信验证码">
                    <template #button>
                        <van-button size="small" type="primary" color="#7232dd" :disabled="codeBtn"
                            @click="sendCodeheadler">发送验证码</van-button>
                    </template>
                </van-field>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit"
                    color="linear-gradient(to right, #ff6034, #ee0a24)">
                    确定
                </van-button>
            </div>

        </van-form>
    </div>
    <!-- 步骤三 二次验证密码-->
    <div v-if="active == 2" class="step2 step-item ">
        <van-form class="login-form" @submit="passwordHandler">
            <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]" style="margin-bottom:15px" />
            <!-- 确认密码 -->
            <van-field v-model="twopassword" type="password" name="重复密码" label="重复密码" placeholder="重复密码"
                :rules="[{ required: true, message: '请再次填写密码' }]" />

            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit"
                    color="linear-gradient(to right, #ff6034, #ee0a24)">
                    确定
                </van-button>
            </div>
        </van-form>
    </div>
    <div v-if="active == 3" class="step3 step-item ">
        <p class="okbox">
            <van-icon class="ok" name="passed" />
        <h2>注册成功</h2>
        </p>
        <p class="loginBox">
            <router-link to="/login">
                <van-button type="success">去登录</van-button>
            </router-link>
        </p>
    </div>

</template>

<script setup lang="ts">
import { Toast } from 'vant';
import { ref } from 'vue';
import { docheckphoneApi, sendCodeApi, checkCodeApi, finishregisterApi } from '@/api/user'
import { useRouter,type Router } from 'vue-router'
import router from '@/router';
const phone = ref<string>('15534051548')

//返回上一级
const tobackFn = ()=>{
    router.go(-1)
}


const active = ref(0);
// return { active };
// 步骤一：验证手机号是否被占用
const checkPhoneHandler = async () => {
    const res = await docheckphoneApi(phone.value)
    console.log('注册',res);
    
    if (((res as unknown) as { code: string }).code == '200') {
        Toast({
            message: '验证成功',
            icon: 'like-o',
        });
        active.value++
        return
    } else {
        Toast.fail({
            message: '手机号已被注册',
            icon: 'phone-circle-o',
        });
    }
}
//步骤二： 发送并且验证验证码  
//发送验证码   
const code = ref<string>('')
const codeBtn = ref<boolean>(false)
const sendCodeheadler = async () => {
    codeBtn.value = true   //禁选项
    const res = await sendCodeApi(phone.value)
    console.log(11, res);
    // ---------------------------------进行倒计时操作
    // ---------------------------------

}
//提交
const checkCodeHandler = async () => {
    console.log('验证');
    const res = await checkCodeApi(phone.value, code.value)
    if (((res as unknown) as { code: string }).code == '200') {
        Toast({
            message: '验证成功',
            icon: 'like-o',
        });
        active.value++
        return
    } else {
        Toast.fail('验证失败,从新输入');
    }
}

// 步骤三 密码验证
const password = ref<string>('')
const twopassword = ref<string>('')
const passwordHandler = () => {
    console.log('密码yanzheng');
    // if(password.value === twopassword.value){
    //     console.log(123);
    // }
    if (password.value === twopassword.value) {
        Toast({
            message: '验证成功',
            icon: 'like-o',
        });
        active.value++
        return
    } else {
        Toast.fail('验证失败,从新输入');
    }
}







</script>
<style scoped lang="scss">
.step-item {
    width: 90%;
    margin: 50px auto;
    padding: 10px;
    box-sizing: border-box;
    height: 200px;
    border-radius: 10px;
    border: 1px solid black;
}

.van-cell-group {
    margin-top: 30px;
}

.button {
    float: right;
    margin-top: 10px;
}

.okbox {
    width: 90%;
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.ok {
    font-size: 60px;
    font-weight: 700;
    color: green;
}

.loginBox {
    float: right;
}
</style>